<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">

</head>
<body>

    <!--导航栏-->
    <div class="nav">
        <img src="image/log1.png" alt="">
        <span>我的博客系统</span>
        <!--这个div仅用于占位-->
        <div class="zhan"></div>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>

    <!--页面主体-->
    <div class="container">
        <!--左侧信息-->
        <div class="container-left">

            <!--左侧用户信息-->
            <div class="card">

                <!--头像-->
                <img src="image/头像.png" alt="">

                <!--用户名-->
                <h3>小比特</h3>

                <a href="#">github地址</a>

                <div class="row">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="row">
                    <span>2</span>
                    <span>1</span>
                </div>

            </div>

        </div>
        <!--右侧信息-->
        <div class="container-right">
            
            <!--标题-->
            <h3 class="title"></h3>
            <!--日期-->
            <div class="data"></div>
            <!--正文,为了配合 editormd ,要转换为 id -->
            <div id="content" style="opacity: 80%">
                
            </div>

        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <!-- 引入editor.md -->
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: 'blog' + location.search,
            success: function(body){
                //更新标题
                let titleDiv = document.querySelector('.title');
                titleDiv.innerHTML = body.title;
                //更新日期
                let dataDiv = document.querySelector('.data');
                dataDiv.innerHTML = body.postTime;
                editormd.markdownToHTML('content', { markdown: body.content});
            }
        });

        function checkLogin(){
            $.ajax({
                type: 'get',
                url: 'login',
                success: function(body){
                    if(body.userId && body.userId > 0){
                        //存在
                        console.log("当前用户已登录");
                    }else{
                        //登陆失败
                        location.assign('login.html');
                    }
                }
            });
        }
        checkLogin();


        function getAuthor(){
            $.ajax({
                type: 'get',
                url: 'author' + location.search,
                success: function(body){
                    let h3 = document.querySelector('.container-left .card h3');
                    h3.innerHTML = body.username;
                }
            });
        }
        getAuthor();

        function delBlog(){
            $.ajax({
                type: 'get',
                url: 'blogDelete',
                success: function(body){
                    let deleteButton = document.createElement('a');
                    deleteButton.innerHTML = '删除';
                    deleteButton.href = 'blogDelete' + location.search;
                    let navEl = document.querySelector('.nav');
                    navEl.appendChild(deleteButton);
                }
            });
        }
        delBlog();

    </script>
</body>
</html>